<template>
  <div class="personnel">
    <!-- 乘机人员 -->
    <el-scrollbar class="personnel_info">
      <div class="animate__animated animate__fadeIn">
        <el-row v-for="(item, index) in data.people" :key="index" class="personnel_row">
          <el-col :span="21">
            <el-row>
              <el-col style="padding-top: 12px;">
                <span class="nickname">{{item.nickname}}</span>
                <span class="peopleType">{{ item.peopleType }}</span>
              </el-col>
              <el-col style="padding-top: 10px;">
                <el-row>
                  <el-col :span="5">
                    <span class="cardId">身份证：{{ item.cardId? item.cardId.replace(/^(.{4})(?:\w+)(.{3})$/,
                      "\$1***********\$2"): ""
                      }}</span>
                  </el-col>
                  <el-col :span="5">
                    <span class="cardId">手机号码：{{ item.phone ? item.phone.replace(/^(.{3})(?:\w+)(.{4})$/,
                      "\$1 **** \$2"): ""}}</span>
                  </el-col>
                  <el-col :span="3">
                    <span class="cardId">性别：{{ item.sex }}</span>
                  </el-col>
                  <el-col :span="3">
                    <span class="cardId">年龄：{{ item.age }}</span>
                  </el-col>
                  <el-col :span="3">
                    <span class="cardId">国籍：{{ item.country }}</span>
                  </el-col>
                  <el-col :span="5">
                    <span class="cardId">所在地区：{{ item.address }}</span>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="3">
            <div class="danger_delete">
              <el-button type="danger" size="large" @click="handleDelete(item)" :icon="PeopleDelete">删除</el-button>
            </div>
            <div class="primary_edit">
              <el-button type="primary" size="large" @click="handleEdit(item)" :icon="EditOne">编辑</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>

    <div class="btn_size">
      <el-button type="primary" size="large" @click="showAddPeople">+ 添加人员信息</el-button>
    </div>
  </div>

  <!-- 修改弹窗 -->
  <transition mode="out-in" enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut">
    <div class="showUpUser_info" v-show="showUser_info">
      <div class="peopleBox">
        <div class="BoxTop" style="margin-top: 20px;">
          <span @click="hideUpUser">
            <img style="margin-top: -16px;" src="../../assets/关闭2.png" alt="关闭" title="关闭窗口">
          </span>
        </div>
        <div class="BoxBody">
          <p style="margin: 15px">正在修改{{peopledata.user.nickname}}信息</p>
          <div class="UserMsg">
            人员名称：
            <el-input placeholder="请填写你的名称" v-model.trim="peopledata.user.nickname" clearable maxlength="10"
              class="BoxInput" />
          </div>
          <div class="UserMsg">
            电话号码：
            <el-input placeholder="请填写你的电话号码" v-model.trim="peopledata.user.phone" clearable maxlength="11"
              show-word-limit class="BoxInput" />
          </div>
          <div class="UserMsg">
            人员类型：
            <el-radio-group v-model="people.type" size="large">
              <el-radio label="0">普通群众</el-radio>
              <el-radio label="1">学生</el-radio>
              <el-radio label="2">退役士兵</el-radio>
            </el-radio-group>
          </div>
          <div class="UserMsg">
            <el-button type="primary" plain style="width:200px;height:40px; margin-left: 40px;"
              @click="confimUp(peopledata.user.id)" :loading="load">确认修改</el-button>
          </div>
        </div>
      </div>
    </div>
  </transition>


  <!-- 添加弹窗 -->
  <transition mode="out-in" enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOutUp">
    <div class="showUpUser_info" v-show="AddPeople">
      <div class="peopleBox">
        <div class="BoxTop" style="margin-top: 20px;">
          <span @click="hideUpUser">
            <img style="margin-top: -16px;" src="../../assets/关闭2.png" alt="关闭" title="关闭窗口">
          </span>
        </div>
        <div class="BoxBody">
          <p style="margin: 20px; margin-left: 40px;">添加人员信息</p>
          <div class="UserMsg">
            人员姓名：
            <el-input placeholder="请填写你的姓名" v-model.trim="People.peopleName" clearable class="BoxInput" />
          </div>
          <div class="UserMsg">
            身份证号：
            <el-input placeholder="请填写你的身份证号码" v-model.trim="People.carId" clearable maxlength="18" show-word-limit
              style="font-size: 16px;" class="BoxInput" />
          </div>
          <div class="UserMsg">
            电话号码：
            <el-input placeholder="请填写你的手机号码" v-model.trim="People.phone" clearable maxlength="11" show-word-limit
              class="BoxInput" />
          </div>
          <div class="UserMsg">
            <el-button type="primary" plain style="width:200px;height:40px; margin-left: 35px;" @click="addPeople"
              :loading="load">确认添加
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </transition>


</template>

<script setup>
// 人员信息
import { ref, reactive, onMounted ,inject,getCurrentInstance} from "vue";
import { useRouter, useRoute } from "vue-router";
import url from "../../common/js/APIUtil"
import { ElMessage } from 'element-plus'
import { Log, PeopleDelete, EditOne, CloseOne } from "@icon-park/vue-next";
// 数据
let data = ref(inject("people"))
let load = ref(false)
let peopledata = reactive({
  user: {}
})
let people = reactive({
  type: null,
  sex: null
})
// 添加人员
let People = reactive({
  peopleName: "",
  carId: "",
  radio1: "男",
  phone: ""
})
// 弹窗隐藏
let showUser_info = ref(false)
let AddPeople = ref(false)
const hideUpUser = () => {
  // 隐藏修改用户文本框
  showUser_info.value = false
  // 隐藏添加人员文本框
  AddPeople.value = false
}
// 显示添加人员文本框
let showAddPeople = () => {
  AddPeople.value = true
}
// 路由
const { proxy } = getCurrentInstance();
// 删除人员
let handleDelete = (value) => {
    proxy.$confirm("确认删除该联系人吗?","提示",{type:"warning"}).then(()=>{
          proxy.$http({
          method:"delete",
          url:url.API_PEOPLE+value.id
        }).then(res=>{
          ElMessage.success("删除成功！！")
          location.reload()
        })
    }).catch(() => {});
}

// 编辑
let handleEdit=(value)=>{
  proxy.$http({
    method:"get",
    url:url.API_PEOPLE+"/getPeople/"+value.id
  }).then((res) => {
    peopledata.user=res.data
    people.type = res.data.peopleType
  })
  showUser_info.value = true
}
let confimUp=(value)=>{
  proxy.$confirm("确认修改该联系人嘛？","提示",{type:"waring"}).then(()=>{
      proxy.$http({
      method:"put",
      url:url.API_PEOPLE+value,
      data:{
        nickname: peopledata.user.nickname,
        phone: peopledata.user.phone,
        peopleType:people.type
      }
    }).then((res)=>{
      if(res.data.code==200){
        ElMessage.success("修改成功...")
        location.reload()
      }
      else{
        ElMessage.warning("修改失败...")
      }
    })
  }).catch(()=>{})
}
// 添加人员
let addPeople = () => {
  load.value = true
  if (People.peopleName == "" || People.carId == "" || People.radio1 == "" || People.phone == "" || People.carId.length < 18 || People.phone.length < 11) {
    ElMessage.warning("请确认您的信息是否填写正确！")
    load.value = false
    return
  }
  else {
    proxy.$http({
      method: "post",
      data: {
        nickname: People.peopleName,
        cardId: People.carId,
        sex: People.radio1,
        phone: People.phone
      },
      url: url.API_PEOPLE + sessionStorage.getItem("id")
    }).then((res) => {
      load.value = true
      if (res.data.code == 200) {
        ElMessage.success("添加成功...")
        location.reload()
        load.value = false
        return
      }
      if (res.data.code == 443) {
        ElMessage.warning("请检查你的身份证格式是否正确...")
        load.value = false
        return
      }
      else {
        ElMessage.warning("添加失败...")
        load.value = false
        return
      }
    })
  }
}
</script>

<style lang="less" scoped>


.border_row{
  border: 2px solid red;
}
.personnel{
  width: 100%;
  height: 96%;
  margin: auto;
  transform: translate(0%, 2%);
}
.personnel_info{
  width: 100%;
  height: 92%;
}
.personnel_row{
  width: 1417px;
  height: 112px;
  margin-left: 20px;
  margin-bottom: 10px;
  padding-top: 5px;
  border-radius: 10px;
  box-shadow: var(--el-box-shadow-light);
}
.personnel_row:hover{
  background: #ecf5ff;
  border-color: #79bbff;
}
// 名称
.nickname{
  font-size: 30px;
  font-family: '微软雅黑';
  font-weight: bolder;
  margin: auto;
  margin-left: 20px;
}
// 购票类型
.peopleType{
  font-size: 12px;
  font-family: '微软雅黑';
  margin-left: 10px;
  padding: 2px;
  border: 1px solid #79bbff;
  color: #79bbff;
}
// 身份证
.cardId{
  font-family: '微软雅黑';
  margin-left: 20px;
}
// 删除
.danger_delete{
  width: 130px;
  height: 30px;
  margin-top: 3px;
  margin-left: 30px;
}
// 编辑
.primary_edit{
  width: 130px;
  height: 30px;
  margin-top: 20px;
  margin-left: 30px;
}
.showUpUser_info{
  position: absolute;
  width: 1920px;
  height: 900px;
  // background: rgba(0, 0, 0, 0.3);
  /* 模糊大小就是靠的blur这个函数中的数值大小 */
  // backdrop-filter: blur(10px);
  z-index: 999;
  top: -310px;
  right:-215px;
}
.peopleBox{
  width: 800px;
  height: 400px;
  box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.1);
  background: rgb(255, 255, 255);
  position: absolute;
  top: 265px;
  left: 30%;
  border-radius: 10px;
}
.BoxTop{
  width: 100%;
  height: 1%;
  font-size: 30px;
  font-weight: bold;
  position: relative;
}
.BoxTop img{
  width: 40px;
  height: 40px;
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
}
.BoxBody {
  width: 100%;
  height: 90%;
  // background-color: #ebecee;
  font-weight: bold;
  font-size: 22px;
  text-align: center;

}
.BoxInput {
  width: 270px;
  height: 40px;
  font-size: 18px;
}

.UserMsg {
  margin-top: 30px;
  margin-right: 10px;
}
el-radio {
  font-size: 18px;
}
// 添加按钮
.btn_size{
  margin-left: 10px;
  margin-top: 2px;
}
:deep(.el-button--large){
  --el-button-size: 45px;
  height: var(--el-button-size);
  padding: 12px 19px;
  font-size: var(--el-font-size-base);
  border-radius: var(--el-border-radius-base);
  width: 99%;
}
</style>